<template>
  <div class="home">
    <!-- <div class="down-load">
      <div class="top">
        <div class="logo"></div>
        <div class="down-btn">下载APP</div>
      </div>
    </div> -->

    <div class="nav-div">
      <nav>
        <li><router-link to="/">推荐音乐</router-link></li>
        <li><router-link to="/hot">热歌榜</router-link></li>
        <li><router-link to="/search">搜索</router-link></li>
      </nav>
    </div>

    <section :class="{ 'parent-d': true, 'r-bottom': song }">
      <!-- <transition name="fade"> -->
      <router-view class="child-d" @change-current-song="$emit('change-current-song', $event)" :song="song"
        :paused="paused" />
      <!-- </transition> -->
    </section>
  </div>
</template>

<script>
export default {
  props: ['song', 'paused'],

  data() {
    return {

    }
  },

  created() {
    this.test(process.env)
  },

  methods: {
    test(data) {
      console.log(data)
    }
  }
}
</script>
<style lang='scss' scoped>
$topred: #d43c33;
$red: #dd001b;

.home {
  .r-bottom {
    margin-bottom: 50px;
  }
}

.parent {
  position: relative;
  height: calc(100vh - 124px);
  overflow-y: auto;
  overflow-x: hidden;

  .child {
    position: absolute;
    top: 0;
    left: 0;
  }
}

.fade-enter-active,
.fade-leave-active {
  // transition: opacity 5s;
  transition: all .3s;
}

.fade-enter {
  // opacity: 0;
  transform: translateX(375px);
}

.fade-enter-to,
.fade-leave {
  // opacity: 1;
  transform: translateX(0);
}

.fade-leave-to {
  // opacity: 1;
  transform: translateX(-375px);
}

.down-load {
  position: relative;
  height: 84px;

  .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 84px;
    padding: 0 10px;
    background-color: $topred;
    box-sizing: border-box;
    z-index: 999;

    .logo {
      width: 142px;
      height: 24px;
      background: url('../../images/logo.png') no-repeat;
      background-size: contain;
    }

    .down-btn {
      width: 100px;
      height: 36px;
      border-radius: 18px;
      background-color: #fff;
      color: $topred;
      font-size: 16px;
      line-height: 36px;
      text-align: center;
    }
  }
}

.nav-div {
  position: relative;
  height: 40px;
}

nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-content: center;
  height: 40px;
  font-size: 15px;
  line-height: 38px;
  border-bottom: 1px solid #ddd;
  z-index: 999;
  background-color: #fff;

  li {
    display: flex;
    justify-content: center;
    flex: 1;

    a {
      padding: 0 5px;
      color: #2c3e50;

      &.router-link-exact-active {
        color: $red;
        border-bottom: 2px solid $red;
      }

    }
  }


}
</style>